<div class="container">
  <!-- 左侧：上传区 + 测量区 -->
  <div class="left-panel">
    <!-- 上传区域 -->
    <div class="upload-area">
      <nz-upload [nzAction]="uploadAction" [nzHeaders]="uploadHeaders" [nzShowButton]="!imageUrl || !isUploading"
        nzListType="text" [nzAccept]="'image/*'" (nzChange)="handleChange($event)">
        <button nz-button nzType="primary">
          <i nz-icon nzType="upload"></i>
          <span>上传图片</span>
        </button>
        <div *ngIf="imageUrl" class="upload-tip">
          提示：点击可更换图片，新图片将重置测量数据
        </div>
      </nz-upload>

      <!-- 校准按钮（新增） -->
      <div class="calibrate-btn-group" *ngIf="imageUrl">
        <button nz-button nzType="default" (click)="startCalibrate()" style="margin-top: 10px;"
          :disabled="isCalibrating">
          <!-- <i nz-icon nzType="ruler"></i> -->
          开始校准
        </button>
        <!-- :disabled="!isCalibrating" -->
        <button nz-button nzType="primary" (click)="cancelCalibrate()" style="margin-top: 10px; margin-left: 10px;"
          :disabled="!isCalibrating">
          取消校准
        </button>
      </div>

      <!-- 校准输入区域（新增） -->
      <div class="calibrate-input" *ngIf="isCalibrating && calibrateEnd">
        <nz-input-number [(ngModel)]="calibrateActualCm" [nzMin]="0.1" [nzStep]="0.1" [nzPrecision]="3"
          placeholder="输入校准线段实际长度（厘米）" style="width: 200px; margin-top: 10px;"></nz-input-number>实际厘米
        <button nz-button nzType="primary" (click)="confirmCalibrate()" style="margin-top: 10px; margin-left: 10px;">
          确认校准
        </button>
        <div class="calibrate-tip">
          当前校准线段像素距离：{{ calibratePixelDistance | number: '1.0-0' }}px
        </div>
      </div>
    </div>

    <!-- 测量区域 -->
    <div class="measure-container">
      <div class="measure-wrapper" (click)="onImageClick($event)" (mousemove)="onImageMouseMove($event)"
        (dblclick)="resetAll()" *ngIf="imageUrl; else noImageState">
        <img #measureImage [src]="imageUrl" class="measure-image" alt="测量目标图片" (load)="resetAll()">

        <!-- 校准模式提示（新增） -->
        <div *ngIf="isCalibrating" class="calibrate-tip-overlay">
          <span *ngIf="!calibrateStart">请点击标记校准线段起点</span>
          <span *ngIf="calibrateStart && !calibrateEnd">请点击标记校准线段终点</span>
        </div>

        <!-- 实时距离/校准提示 -->
        <div *ngIf="showTempDistance && !isCalibrating" class="temp-distance">
          当前距离: {{ currentTempDistance | number: '1.3-3' }} 厘米
        </div>
        <div *ngIf="isCalibrating && calibrateStart" class="temp-distance">
          校准像素距离: {{ calibratePixelDistance | number: '1.0-0' }}px
        </div>

        <!-- 鼠标十字准星 -->
        <div *ngIf="imageUrl" class="mouse-crosshair" [style.left]="mouseX + 'px'" [style.top]="mouseY + 'px'"></div>

        <!-- 绘制层 -->
        <div class="drawing-layer">
          <!-- 校准线段（新增） -->
          <div *ngIf="isCalibrating && calibrateStart && tempPoint" class="calibrate-line"
            [style.left]="getDisplayPosition(calibrateStart.x, true) + 'px'"
            [style.top]="getDisplayPosition(calibrateStart.y, false) + 'px'"
            [style.width]="getLineLength(calibrateStart, tempPoint) + 'px'"
            [style.transform]="getLineTransform(calibrateStart, tempPoint)"></div>

          <!-- 普通测量线段 -->
          <div *ngFor="let segment of segments; trackBy: trackByIndex">
            <div class="segment-line" [style.left]="getDisplayPosition(segment.start.x, true) + 'px'"
              [style.top]="getDisplayPosition(segment.start.y, false) + 'px'"
              [style.width]="getLineLength(segment.start, segment.end) + 'px'"
              [style.transform]="getLineTransform(segment.start, segment.end)" [style.backgroundColor]="segment.color">
            </div>
            <div class="point-marker" [style.left]="getDisplayPosition(segment.start.x, true) + 'px'"
              [style.top]="getDisplayPosition(segment.start.y, false) + 'px'" [style.backgroundColor]="segment.color">
            </div>
            <!-- <div class="point-label" [style.left]="getDisplayPosition(segment.start.x, true) + 10 + 'px'"
              [style.top]="getDisplayPosition(segment.start.y, false) - 10 + 'px'">
              段{{ segment.index }}-起 ({{ segment.start.x }}, {{ segment.start.y }})
            </div> -->
            <div class="point-marker" [style.left]="getDisplayPosition(segment.end.x, true) + 'px'"
              [style.top]="getDisplayPosition(segment.end.y, false) + 'px'" [style.backgroundColor]="segment.color">
            </div>
            <!-- <div class="point-label" [style.left]="getDisplayPosition(segment.end.x, true) + 10 + 'px'"
              [style.top]="getDisplayPosition(segment.end.y, false) - 10 + 'px'">
              段{{ segment.index }}-终 ({{ segment.end.x }}, {{ segment.end.y }})
            </div> -->
          </div>

          <!-- 临时测量线段 -->
          <div *ngIf="currentSegment && tempPoint && !isCalibrating">
            <div class="temp-segment-line" [style.left]="getDisplayPosition(currentSegment.start.x, true) + 'px'"
              [style.top]="getDisplayPosition(currentSegment.start.y, false) + 'px'"
              [style.width]="getLineLength(currentSegment.start, tempPoint) + 'px'"
              [style.transform]="getLineTransform(currentSegment.start, tempPoint)"
              [style.backgroundColor]="currentSegment.color"></div>
            <div class="point-marker" [style.left]="getDisplayPosition(currentSegment.start.x, true) + 'px'"
              [style.top]="getDisplayPosition(currentSegment.start.y, false) + 'px'"
              [style.backgroundColor]="currentSegment.color"></div>
            <!-- <div class="point-label" [style.left]="getDisplayPosition(currentSegment.start.x, true) + 10 + 'px'"
              [style.top]="getDisplayPosition(currentSegment.start.y, false) - 10 + 'px'">
              段{{ segments.length + 1 }}-起 ({{ currentSegment.start.x }}, {{ currentSegment.start.y }})
            </div> -->
          </div>
        </div>
      </div>

      <ng-template #noImageState>
        <div class="no-image-hint">
          <i nz-icon nzType="picture" nzTheme="outline" class="hint-icon"></i>
          <p>请上传图片后开始测量</p>
        </div>
      </ng-template>
    </div>
  </div>

  <!-- 右侧记录面板 -->
  <div class="records-panel">
    <h3>测量记录</h3>
    <div class="empty-record" *ngIf="segments.length === 0 && !currentSegment">
      <p *ngIf="imageUrl">在图片上点击开始测量（建议先校准）</p>
      <p *ngIf="!imageUrl">请先上传图片</p>
    </div>
    <div *ngFor="let segment of segments; trackBy: trackByIndex" class="record-item">
      <div class="color-tag" [style.backgroundColor]="segment.color"></div>
      <div class="record-info">
        <div class="record-index">段 {{ segment.index }}</div>
        <div class="record-distance">
          距离: {{ segment.distance | number: '1.3-3' }} 厘米
        </div>
      </div>
      <button class="delete-btn" nz-button nzSize="small" nzShape="circle" (click)="deleteSegment(segment.index)">
        <i nz-icon nzType="close"></i>
      </button>
    </div>
    <div *ngIf="currentSegment" class="record-item temp-record">
      <div class="color-tag" [style.backgroundColor]="currentSegment.color"></div>
      <div class="record-info">
        <div class="record-index">段 {{ segments.length + 1 }}（测量中）</div>
        <div class="record-distance">点击完成终点</div>
      </div>
    </div>
    <button *ngIf="(segments.length > 0 || currentSegment) && imageUrl" class="reset-btn" nz-button nzType="default"
      (click)="resetAll()">
      <i nz-icon nzType="delete"></i>
      <span>清空所有记录</span>
    </button>
  </div>
</div>